<template>
    小明的学习成绩评定为:
    <p v-if="type === 'A'">优秀</p>
    <p v-else-if="type ==='B'">良好</p>
    <p v-else>合格</p>

    <button @click="type === 'A'">成绩优秀</button>
    <button @click="type === 'B'">成绩良好</button>
    <button @click="type === 'C'">成绩合格</button>
</template>

<script setup>
import {ref} from 'vue'
const type = ref("B")
const changeGradeA=()=>{
    type.value='A'
}
const changeGradeB=()=>{
    type.value='B'
}
const changeGradeC=()=>{
    type.value='C'
}
</script>